/**
 * 下拉Select组件 配合form组件使用
 * @Author: linzy
 * @Date: 2022-05-23
 * @function Select
 * @param {array} options - 最少上传数量 格式为 [{label:'',value:''}]
 * @param {array|object} map - 最少上传数量 对象为{label: 'label',value: 'value'} 数组为['value','label']
 * @param {object} fieldNames - 可以替代map 因为map语义不强 例：fieldNames：{ value: 'id', label: 'name' }
 * @param {function} optionRender - optionRender(Select.Option, item, index)
 * @param {ReactDom} suffix - 选择框右侧的元素 可用于刷新等
 * @param {*} ... - antd Select组件属性
 * @example
 *  <Select />
 */
import { typeOf } from "@/hooks/tools";
import React from "react";
import { Select } from "antd";

export default props => {
  const {
    options = [],
    map,
    fieldNames,
    optionRender,
    suffix,
    prefix,
    ...rest
  } = props;
  let maps;
  if (map) {
    if (typeOf(map) === "array") {
      maps = map;
    } else if (typeOf(map) === "object") {
      maps = [map.value, map.label];
    }
  }
  if (typeOf(fieldNames) === "object") {
    maps = [fieldNames.value, fieldNames.label];
  }
  // 处理待搜索showSearch
  if (rest.showSearch === true) {
    if (!rest.filterOption && options) {
      rest.filterOption = (inputValue, option) => {
        var label = maps ? maps[1] : option.props.label ?? item.children;
        return option.props[label].includes(inputValue);
      };
    }
  }
  return suffix ? (
    <div style={{ display: "flex" }}>
      <Select {...rest}>
        {options?.map((item, index) => {
          if (optionRender) {
            return <>{optionRender(Select.Option, item, index)}</>;
          } else {
            const optionProps = {};
            optionProps.value = maps ? item[maps[0]] : item.value ?? item.key;
            optionProps.key = optionProps.value;
            optionProps.children = maps
              ? item[maps[1]]
              : item.label ?? item.children;
            return <Select.Option {...{ ...item, ...optionProps }} />;
          }
        })}
      </Select>
      {suffix}
    </div>
  ) : prefix ? (
    <div style={{ display: "flex", paddingTop: "4px" }}>
      {prefix}
      <Select {...rest}>
        {options?.map((item, index) => {
          if (optionRender) {
            return <>{optionRender(Select.Option, item, index)}</>;
          } else {
            const optionProps = {};
            optionProps.value = maps ? item[maps[0]] : item.value ?? item.key;
            optionProps.key = optionProps.value;
            optionProps.children = maps
              ? item[maps[1]]
              : item.label ?? item.children;
            return <Select.Option {...{ ...item, ...optionProps }} />;
          }
        })}
      </Select>
    </div>
  ) : (
    <Select {...rest}>
      {options?.map((item, index) => {
        if (optionRender) {
          return <>{optionRender(Select.Option, item, index)}</>;
        } else {
          const optionProps = {};
          optionProps.value = maps ? item[maps[0]] : item.value ?? item.key;
          optionProps.key = optionProps.value;
          optionProps.children = maps
            ? item[maps[1]]
            : item.label ?? item.children;
          return <Select.Option {...{ ...item, ...optionProps }} />;
        }
      })}
    </Select>
  );
};
